<template>
	<div class="Navbar">
		<div class="left" @click="goBack"><slot name="left"></slot></div>
		<div class="center"><slot name="center">叮当图书商城</slot></div>
		<div class="right"><slot name="right"></slot></div>
	</div>
</template>
<script>
import {useRouter} from 'vue-router'
export default {
	name:'Navbar',
	props:{
	
	},
	components:{},
	setup(){
		const router =useRouter() // 创建路由器
		const goBack=()=>{
			router.go(-1)
			// history.go(-1)
		}

		return{
		goBack,
		}
	}
}
</script>
<style>
.Navbar{
	background-color: #44b883;
	width: 100%;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 9;
	height: 45px;
	line-height: 45px;
	display: flex;
	text-align: center;
	
	box-shadow: 0 2px 0 rgba(100,100,100,0.4);
}
.Navbar div{
	height: 45px;
font-size: 20px;
	
}
.left,.right{
width:45px;

}
.left img{
	width:30px;
	height: 20px;
	
}
.center{
flex: 1;
}

</style>